<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation演示</title>
    <link rel="stylesheet" href="./style/style.css">
    <script src="./jquery/jquery2.1.1.min.js"></script>
</head>

<body>
    <h1>animation</h1>
    <div class="animation">
        <div class="header">
            <h3>动画的八种属性</h3>
            <div class="animation-describe">
                <ul>
                    <li>合并写法 animation: name duration timing-function delay iteration-count direction fill-mode
                        play-state;
                    </li>
                    <li>分离式写法示例 {animation-name: ; animation-duration:;}</li>
                </ul>
            </div>
        </div>
        <div class="body">
            <div class="name attribute">name</div>
            <div class="duration attribute">duration</div>
            <div class="timing-function attribute">timing-function</div>
            <div class="delay attribute">delay</div>
            <div class="name-describe describe">
                <ul>
                    <li>为 @keyframes 动画指定名称</li>
                    <li>属性值为动画名称,如{animation-name:demo;}</li>
                    <li>@keyframes 动画名称{}和@-webkit-keyframes{}并列出现应对不同浏览器，内容相同</li>
                    <li>{}填写初始状态，中间状态，结束状态</li>
                </ul>
            </div>
            <div class="duration-describe describe">
                <ul>
                    <li>用于定义动画完成一个周期需要多长时间</li>
                    <li>属性值为时间，如{animation-duration:.5s;}</li>
                    <li>默认值为 0，意味着没有动画效果</li>
                </ul>
            </div>
            <div class="timing-function-describe describe">
                <a href="./animation-timing-function.html">
                    <ul>
                        <li>指定动画将如何完成一个周期</li>
                        <li>属性值有六种，如{animation-timing-function:linear;}</li>
                        <li>linear：动画从头到尾的速度是相同的</li>
                        <li>ease （默认值）：动画以低速开始，然后加快，在结束前变慢。</li>
                        <li>ease-in：动画以低速开始</li>
                        <li>ease-out：动画以低速结束</li>
                        <li>ease-in-out：动画以低速开始和结束</li>
                        <li>cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</li>
                    </ul>
                </a>
            </div>
            <div class="delay-describe describe">
                <ul>
                    <li>定义动画什么时候开始</li>
                    <li>属性值为时间,默认值为0</li>
                </ul>
            </div>
        </div>
        <div class="leg">
            <div class="iteration-cunt attribute">iteration-count</div>
            <div class="direction attribute">direction</div>
            <div class="fill-mode attribute">fill-mode</div>
            <div class="play-state attribute">play-state</div>
            <div class="iteration-cunt-describe describe">
                <ul>
                    <li>定义动画应该播放多少次</li>
                    <li>属性值为数字或infinite（无限次）</li>
                </ul>
            </div>
            <div class="direction-describe describe">
                <a href="./direction.html">
                    <ul>
                        <li>定义是否循环交替反向播放动画</li>
                        <li>如果动画被设置为只播放一次，该属性将不起作用</li>
                        <li>属性值有四种 normal|reverse|alternate|alternate-reverse</li>
                        <li>normal(默认值 )：动画按正常播放</li>
                        <li>reverse：动画反向播放</li>
                        <li>alternate ：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
                        </li>
                        <li>alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放</li>
                    </ul>
                </a>
            </div>
            <div class="fill-mode-describe describe">
                <a href="./fill-mode.html">
                    <ul>
                        <li>规定当动画不播放时要应用到元素的样式</li>
                        <li>属性值有四种 none|forwards|backwards|both</li>
                        <li>none(默认值) ：动画在动画执行之前和之后不会应用任何样式到目标元素</li>
                        <li>forwards：在动画结束后，动画将应用该属性值</li>
                        <li>backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）</li>
                        <li>both：动画遵循 forwards 和 backwards 的规则。换句话说，动画会在两个方向上扩展动画属性</li>
                    </ul>
                </a>
            </div>
            <div class="play-state-describe describe">
                <ul>
                    <li>指定动画是否正在运行或已暂停</li>
                    <li>使用此属性在一个周期中暂停动画</li>
                    <li>属性值有两种 paused|running</li>
                    <li>paused ：指定暂停动画</li>
                    <li>running：指定正在运行的动画</li>
                </ul>
            </div>
        </div>
    </div>


    <script src="./script/script.js"></script>
</body>

</html>